import { router } from "expo-router";
import {
  View,
  Text,
  SegmentedControl,
  TextField,
  Button,
  Colors,
  Image,
} from "react-native-ui-lib";

export default function LoginScreen() {
  const userLogin = () => {
    router.replace("/tabs");
  };
  return (
    <View padding-16>
      <View height={250} flexS center>
        <Image
          width={100}
          height={100}
          source={require("@/assets/images/icon.png")}
        />
        <Text marginT-16 text60BO>
          ExpoApp
        </Text>
      </View>
      <Text blue50 text20 marginB-s5>
        Welcome
      </Text>
      <SegmentedControl
        activeColor={Colors.primary}
        onChangeIndex={(index) => console.log(index)}
        segments={[{ label: "注册" }, { label: "登录" }]}
      />

      <View marginT-s5>
        <TextField preset="outline" placeholder="请输入用户名" />
        <TextField
          preset="outline"
          placeholder="请输入密码"
          secureTextEntry
          grey10
        />
      </View>

      <Button
        white
        backgroundColor={Colors.primary}
        label="登录"
        onPress={() => userLogin()}
      />
      <Button marginT-16 link primary label="注册" />
    </View>
  );
}
